border -
bottom - style
|
|
|
|
|
|
|||||||||
|
7.0 |
8.0 |
9.0 |
7.0 |
8.0 |
9.6 |
10.0 |
10.0 |
3.1 |
4.0 |
5.0 |
3.0 |
3.6 |
4.0 |
|
Помилка |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Коротка інформація
|
CSS |
CSS1,
CSS2.1 |
|
Значення
за умовчанням |
Ні |
|
Наслідує |
Ні |
|
Застосовується |
До усіх
елементів |
|
Аналог
HTML |
<img
border > | <table border> |
|
Посилання
на специфікацію |
http://www.w
3.org/TR/CSS21/box.html#border - style - properties |
Опис
Встановлює
стиль межі внизу елементу.
Синтаксис
border -
bottom - style: none | hidden | dotted | dashed | solid | double | groove |
ridge | inset | outset | inherit
Значення
none Лінія не відображається і значення
її товщини обнуляється.
Hidden Має той же ефект, що і none за винятком застосування
border - bottom - style до елементів таблиці, у якої значення властивості
border, - collapse встановлене як collapse. В цьому випадку нижня межа в
осередку не відображатиметься взагалі.
dotted Лінія складається з набору точок.
dashed Пунктирна лінія, що складається з
серії коротких відрізків.
solid Суцільна лінія.
Double Подвійна лінія.
groove Створює ефект втиснутої лінії.
ridge Створює ефект рельєфної лінії.
inset Псевдотривимірна лінія.
outset Псевдотривимірна лінія.
inherit Наслідує значення батька.
Вид вказаних
стилів представлений на мал. 1.
Рис.1. Стилі
меж
Приклад
HTML 4.0 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN""http ://www.w 3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=windows - 1251">
<title>border - bottom -
style</title>
<style type="text/css">
DIV#panel {
background: #ccc; /* Колір фону */
}
# #panel P {
padding: 5px; /* Додаємо поля */
margin: 0; /* Прибираємо відступи у
параграфа */
}
# #panel P#title {
background: navy; /* Колір фону */
color: white; /* Колір тексту */
border - bottom - width: 2px; /* Товщина
лінії внизу */
border - bottom - style: solid; /* Стиль
лінії внизу */
border - bottom - color: white; /* Колір
лінії внизу */
}
</style>
</head>
<body>
<div id="panel">
<p id="title">Луцький національний технчний університет </p>
<p >Луцький
національний технчний університет є одним із найкращих професійних закладів
освіти у місті Луцьку</p>
</div>
</body>
</html>
Результат
цього прикладу показаний ні мал. 1.
Мал. 1.
Застосування властивості border - bottom - style
Об'єктна модель
[window.]document.getElementById("elementID").style.borderBottomStyle
Браузери
Браузер
Internet Explorer до шостої версії включно при товщині межі 1px відображає
dotted як dashed. При товщині 2px і вище значення dotted працює коректно. Ця
помилка виправлена в IE7, але тільки для усіх меж завтовшки 1px. Якщо одна з
меж блоку має товщину 2px і вище, то в IE7 значення dotted перетворюється на
dashed.
Internet
Explorer до сьомої версії включно не підтримує значення hidden і inherit.
Стиль межі в
різних браузерах може дещо розрізнятися при використанні значень groove, ridge,
inset або outset.